﻿@{
    ViewBag.Title = "Chatting";
   
}
<!-- Coryright by DaiThinh - www.ketnoia2.tk - www.sonmyschool.com - www.itvnn.net(bavuongduongpho)  -->
<!-- Hay giu dong chu nay - Hay ton trong ban quyen - cung nhu ton trong ban! -->
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="../../Scripts/jquery-1.3.2.min.js" type="text/javascript"></script>
    <script src="../../Scripts/jquery.mousewheel.js" type="text/javascript"></script>
    <script src="../../Scripts/jScrollPane.min.js" type="text/javascript"></script>
    <script src="../../Scripts/script.js" type="text/javascript"></script>
    <link rel="stylesheet" type="text/css" href="../../Content/jScrollPane.css" />
    <link rel="stylesheet" type="text/css" href="../../Content/page.css" />
    <link rel="stylesheet" type="text/css" href="../../Content/chat.css" />
    <link rel="stylesheet" href="../../Content/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../../Content/jqx.fresh.css" type="text/css" />
    <script type="text/javascript" src="../../Scripts/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="../../Scripts/jqxcore.js"></script>
    <script type="text/javascript" src="../../Scripts/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../Scripts/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../Scripts/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../Scripts/jqxdata.js"></script>
    <script src="../../Scripts/jqxsplitter.js" type="text/javascript"></script>
    <script src="../../Scripts/gettheme.js" type="text/javascript"></script> 
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = getTheme();
            $("#splitter").jqxSplitter({ theme: theme, width: 600, height: 600, panels: [{ size: '40%'}] });

            // prepare the data
            var data = new Array();

            var firstNames = ["Nancy", "Andrew", "Janet", "Margaret", "Steven", "Michael", "Robert", "Laura", "Anne"];
            var lastNames = ["Davolio", "Fuller", "Leverling", "Peacock", "Buchanan", "Suyama", "King", "Callahan", "Dodsworth"];
            var titles = ["Sales Representative", "Vice President, Sales", "Sales Representative", "Sales Representative", "Sales Manager", "Sales Representative", "Sales Representative", "Inside Sales Coordinator", "Sales Representative"];

            var k = 0;
            for (var i = 0; i < firstNames.length; i++) {
                var row = {};
                row["firstname"] = firstNames[k];
                row["lastname"] = lastNames[k];
                row["title"] = titles[k];
                data[i] = row;
                k++;
            }

            var source =
            {
                localdata: data,
                datatype: "array"
            };
            var dataAdapter = new $.jqx.dataAdapter(source);

            var updatePanel = function (index) {
                var container = $('<div style="margin: 5px;">' + firstNames[index] + '</div>')
                var leftcolumn = $('<div style="float: left; width: 100%;"><input type"text" id="chat" style = "width:330px; height:310px"/></div>');
                var chattext = $('<input type"text" id="chat" style = "width:250px"/><input type="button" value="send" class="blueButton">');
                container.append(leftcolumn);
                leftcolumn.append(chattext);
                $("#ContentPanel").html(container.html());
            }

            $('#listbox').bind('select', function (event) {
                updatePanel(event.args.index);
            });

            // Create jqxListBox
            $('#listbox').jqxListBox({ selectedIndex: 0, theme: theme, source: dataAdapter, displayMember: "firstname", valueMember: "notes", itemHeight: 70, height: '100%', width: '400px',
                renderer: function (index, label, value) {
                    var datarecord = data[index];
                    var imgurl = '../../images/' + label.toLowerCase() + '.png';
                    var img = '<img height="50" width="40" src="' + imgurl + '"/>';
                    var table = '<table style="min-width: 130px;"><tr><td style="width: 40px;" rowspan="2">' + img + '</td><td>' + datarecord.firstname + " " + datarecord.lastname + '</td></tr><tr><td>' + datarecord.title + '</td></tr></table>';
                    return table;
                }
            });
            updatePanel(0);
        });
</script>
</head>
<body>
    <div id="chatContainer" style="left: -150px">
        <div id="chatTopBar" class="rounded" style="width: 760px">
            CHAT SYSTEM
        </div>
        <div id="chatLineHolder">
            <form id="loginForm" method="post" action="">
            <div id="ContentPanel">
            </div>
            </form>
        </div>
        <div id="chatUsers" class="rounded">
            <div id="listbox">
            </div>
        </div>
        <div id="chatBottomBar" class="rounded" style="width: 760px">
            <form id="" method="post" action="">
            Name Friend :
            <input type="text" name="nameFriend" />
            <input type="submit" class="blueButton" value="Add Friend" />
            <input type="submit" class="blueButton" value="Del Friend" />
            <input type="submit" class="blueButton" value="Log Out" />
            <input type="submit" class="blueButton" value="Profile" />
            </form>
            <form id="submitForm" method="post" action="">
            </form>
        </div>
    </div>
</body>
</html>
